import React, { useEffect, useRef } from 'react';
import { createApp } from 'vue';
import HelloVue from './HelloVue.vue';

export default function VueWrapper() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (containerRef.current) {
      const app = createApp(HelloVue);
      app.mount(containerRef.current);

      return () => {
        app.unmount();
      };
    }
  }, []);

  return <div ref={containerRef} />;
}
